<template>
  <ScalablePage>
    <div
      class="big-screen sbgl flex-between"
      style="width: 480px; overflow: hidden"
    >
      <div class="screen-right">
        <div class="device-repair">
          <!-- <img src="@/assets/sbgl/screen-title03.png" alt="" class="screen-title" /> -->
          <div class="screen-title-container-l1">
            <img
              src="@/assets/sbgl/screen-title03.png"
              alt=""
              class="screen-title"
            />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="repair-main flex-between">
            <div class="repair-chart" id="repairChart"></div>
            <div class="repair-list">
              <div class="repair-option flex-between">
                <div class="option-left flex-between">
                  <div class="option-point flex-center">
                    <div class="point-inner"></div>
                  </div>
                  <div class="option-title">今日待维修</div>
                </div>
                <div class="option-value">{{ shebeistatus.djx }}</div>
              </div>
              <div class="repair-option flex-between">
                <div class="option-left flex-between">
                  <div class="option-point flex-center">
                    <div class="point-inner"></div>
                  </div>
                  <div class="option-title">今日设备维修任务</div>
                </div>
                <div class="option-value">
                  {{ shebeistatus.rw }}
                </div>
              </div>
              <div class="repair-option flex-between">
                <div class="option-left flex-between">
                  <div class="option-point flex-center">
                    <div class="point-inner"></div>
                  </div>
                  <div class="option-title">今日已维修</div>
                </div>
                <div class="option-value">{{ shebeistatus.ywx }}</div>
              </div>
              <div class="repair-option flex-between">
                <div class="option-left flex-between">
                  <div class="option-point flex-center">
                    <div class="point-inner"></div>
                  </div>
                  <div class="option-title">今日已验收</div>
                </div>
                <div class="option-value">{{ shebeistatus.bh }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="device-maintain">
          <!-- <img src="@/assets/sbgl/screen-title04.png" alt="" class="screen-title" /> -->
          <div class="screen-title-container-l1">
            <img
              src="@/assets/sbgl/screen-title04.png"
              alt=""
              class="screen-title"
            />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="maintain-top flex-center">
            <div class="top-left">
              <!-- <div class="top-title">
                环比上月
                <span class="top-rate">+13.2%</span>
              </div> -->
              <div class="top-num">{{shebeizongwanchenglv}}%</div>
              <div class="top-desc">近半年维护总完成率</div>
            </div>
            <div class="top-info">
              <div class="info-title">近半年维护总次数</div>
              <div class="info-value">{{jinbannianweihucishu}} 次</div>
            </div>
          </div>
          <div class="maintain-title">
            {{ getCurrentDate("yyyy-MM") }}月设备维护信息
          </div>
          <div class="maintain-list flex-between">
            <div class="list-outer list-left">
              <div
                class="list-option"
                v-for="(item, index) in weiwancheng"
                :key="index"
                :class="{ active: item.value == '未完成' }"
              >
                {{ item.key }}：{{ item.value }}
              </div>
            </div>
            <div class="list-line"></div>
            <div class="list-outer list-right">
              <div
                class="list-option"
                v-for="(item, index) in yiwancheng"
                :key="index"
                :class="{ active: item.value == '未完成' }"
              >
                {{ item.key }}：{{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import * as echarts from "echarts";
import { onMounted, ref, toRefs, reactive } from "vue";
import {
  getCurrentDateFormatted,
  getPreviousDay,
  formatCurrentDateTime,
  getLast12MonthsDates,
  getCurrentDate,
} from "@/utils/date";

import {
  waterApi,
  getYweixiuAPI,
  getDweixiuAPI,
  getYyanshouAPI,
  getYRenwuAPI,
  getEquipmentMaintainInfoAPI,
  getEquipmentMaintainRateAPI,
  getEquipmentMaintainCountAPI,
} from "@/utils/shuiwu/api";
// let url="http://192.168.254.34:8090/info/getIndexVal"
let url = "http://100.66.1.2:8090/info/getIndexVal";

const yuanShui = ref("");
const jingShui = ref("");
// 设备未完成数量
const weiwancheng = ref([]);
// 设备已完成数量
const yiwancheng = ref([]);
// 设备总完成率
const shebeizongwanchenglv = ref(100);

// 近半年维护总次数
const jinbannianweihucishu = ref(0);



// const tatal = ref(0);
// const chushui = ref(0);
const state = reactive({
  // shebei: {
  //   shebeiguanli: [],
  //   total: 0,
  // },
  // water: {
  //   yuanShui: 0,
  //   jingShui: 0,
  //   gongShui: 0,
  // },
  isResponse: {
    djx: false,
    ywx: false,
    bh: false,
  },
  shebeistatus: {
    djx: 0,
    ywx: 0,
    bh: 0,
    rw: 0,
  },
  weixiu: [],
});

let { weixiu, shebeistatus } = toRefs(state);

let intervalId = null;

onMounted(() => {
  // getJingShui(631);
  // getJingShui(642); //出水
  // getBengZu(634);
  // getChuShui(642);
  // getJingShui(643);
  // shebeiGuanli();

  // getYweixiu()
  shebeiGuanli();
  getYRenwu();
  deviceCompleteRate();
  equipmentMaintainCountAPI();

  // shebeiWeixiu(); ====
  // drawDeviceCount();
  // drawDeviceMonth();
  // drawDeviceMain();
  // drawDeviceYear();
  //   intervalId = setInterval(() => {
  //     getJingShui(631);
  //     getJingShui(642);
  //     getChuShui(642);
  //     getBengZu(634);
  //     getJingShui(643);
  //   }, 30000);
});

//已维修
function getYweixiu() {
  getYweixiuAPI().then((res) => {
    state.isResponse.ywx = true;
    if (res.data.length !== 0) {
      state.shebeistatus.ywx = Number(res.data.slice(-1)[0].value);
    }
  });
}

//代维修
function getDweixiu() {
  getDweixiuAPI().then((res) => {
    state.isResponse.djx = true;
    if (res.data.length !== 0) {
      state.shebeistatus.djx = Number(res.data.slice(-1)[0].value);
    }
  });
}

//已验收
function getYyanshou() {
  state.isResponse.bh = true;
  getYyanshouAPI().then((res) => {
    if (res.data.length !== 0) {
      state.shebeistatus.bh = Number(res.data.slice(-1)[0].value);
    }
  });
}

//设备维修任务
function getYRenwu() {
  getYweixiu();
  getDweixiu();
  getYyanshou();
  const intervalGet = setInterval(() => {
    if (state.isResponse.djx && state.isResponse.ywx && state.isResponse.bh) {
      clearInterval(intervalGet);
      getYRenwuAPI().then((res) => {
        if (res.data.length !== 0) {
          state.shebeistatus.rw = Number(res.data.slice(-1)[0].value);
        }
        drawDeviceRepair(
          state.shebeistatus.djx,
          state.shebeistatus.ywx,
          state.shebeistatus.bh,
          state.shebeistatus.rw
        );
      });
    }
  }, 500);
}

// 设备信息
function shebeiGuanli() {
  getEquipmentMaintainInfoAPI().then((res) => {
    if (res.data.length !== 0) {
      res.data.forEach((item: any) => {
        if (item.value === "已完成") {
          const { key, value } = item;
          const n = key.split("-");
          yiwancheng.value.push({
            key: n[0],
            value,
          });
        } else if (item.value === "未完成") {
          const { key, value } = item;
          const n = key.split("-");
          weiwancheng.value.push({
            key: n[0],
            value,
          });
        }
      });
    }
  });
}

// 设备完成率
function deviceCompleteRate() {
  getEquipmentMaintainRateAPI().then((res) => {
    if(res.data.length !== 0){
      shebeizongwanchenglv.value = parseInt(res.data[0].value) === 0? 100: parseInt(res.data[0].value);
    }else{
      shebeizongwanchenglv.value = 100
    }
  });
}

// 获取近半年维护总次数
function equipmentMaintainCountAPI() {
  getEquipmentMaintainCountAPI().then((res) => {
    if(res.data.length !== 0){
      jinbannianweihucishu.value = parseInt(res.data[0].value);
    }else{
      jinbannianweihucishu.value = 0
    }
  });
}

// 设备统计
function drawDeviceCount() {
  var chartDom = document.getElementById("countChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: false,
    // },
    legend: {
      show: false,
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "10%",
      bottom: "10%",
    },
    color: ["#FFD15C"],
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLabel: {
        color: "#DADADA",
        fontSize: 11,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.50)",
          width: 1,
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "每月安全隐患上报数量",
        type: "bar",
        barWidth: 10,
        color: "#1A79E8",
        data: [10, 52, 200, 334, 390, 330, 220],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(47, 199, 247, 1)",
              },
              {
                offset: 1,
                color: "rgba(108, 149, 230, 0)",
              },
            ]),
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
}
// 当月设备完好率
function drawDeviceMonth() {
  var chartDom = document.getElementById("monthChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: false,
    // },
    legend: {
      show: false,
    },
    color: ["#06bcdb", "#f48080"],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,

        itemStyle: {
          // borderRadius: 5,
          // borderColor: "rgba(0,0,0,0)",
          // borderWidth: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 8,
            color: "#fff",
            fontWeight: "bold",
            formatter: "{b} \n  {d}%",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "完好" },
          { value: 35, name: "故障" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}
// 重要设备完好率
function drawDeviceMain() {
  var chartDom = document.getElementById("mainChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: false,
    // },
    legend: {
      show: false,
    },
    color: ["#06bcdb", "#f48080"],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,

        itemStyle: {
          // borderRadius: 5,
          // borderColor: "rgba(0,0,0,0)",
          // borderWidth: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 8,
            color: "#fff",
            fontWeight: "bold",
            formatter: "{b} \n  {d}%",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "完好" },
          { value: 35, name: "故障" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}
// 年度设备完好率趋势
function drawDeviceYear() {
  var chartDom = document.getElementById("yearChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "年度设备完好率趋势",
      textStyle: {
        color: "#D0DEEE",
        fontSize: 12,
      },
      left: "1%",
      top: "1%",
    },
    // tooltip: {
    //   trigger: "axis",
    //   show: true,
    //   formatter: "{b} {a} \n  {c} 台",
    //   backgroundColor: "rgba(67,67,67,0.7)",
    //   borderColor: "rgba(67,67,67,0.7)",
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 12,
    //   },
    // },
    legend: {
      show: false,
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "23%",
      bottom: "10%",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLabel: {
        color: "#DADADA",
        fontSize: 11,
      },
      axisTick: {
        color: "rgba(255, 255, 255, 0.20)",
        fontSize: 10,
      },
      axisLine: {
        color: "rgba(255, 255, 255, 0.20)",
        fontSize: 10,
      },
    },
    yAxis: {
      name: "单位：台",
      nameLocation: "end",
      nameTextStyle: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },
      type: "value",
      axisLabel: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },

      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.50)",
          width: 1,
          type: "dashed",
        },
      },
    },
    series: [
      {
        color: "#2694fc",
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        name: "设备完好率",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(40,146,249, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(40,146,249, 0)",
            },
          ]),
        },
      },
    ],
  };

  option && myChart.setOption(option);
}
// 设备维修
function drawDeviceRepair(djx: number, ywx: number, bh: number, rw: number) {
  var chartDom = document.getElementById("repairChart");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: false,
    // },
    legend: {
      show: false,
    },
    color: ["#06bcdb", "#f48080"],
    series: [
      {
        name: "设备维修",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,
        color: ["#00d059", "#fffa92", "#13e7ff", "#ff627d"],
        itemStyle: {
          // borderRadius: 5,
          // borderColor: "rgba(0,0,0,0)",
          // borderWidth: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 24,
            color: "#fff",
            fontWeight: "bold",
            formatter: "{b} \n  {d}%",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: djx, name: "待维修" },
          { value: rw, name: "维修任务" },
          { value: ywx, name: "已维修" },
          { value: bh, name: "已验收" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}

function shebeiWeixiu() {
  fetch("http://111.113.0.230:8066/orca/equipment/equipmentRepair/list")
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      //  djx  ywx  bh
      let arr = res.result.records;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].finishFlag == "djx") {
          state.shebeistatus.djx += 1;
        }
        if (arr[i].finishFlag == "ywx") {
          state.shebeistatus.ywx += 1;
        }
        if (arr[i].finishFlag == "bh") {
          state.shebeistatus.bh += 1;
        }
      }
      let num =
        state.shebeistatus.bh + state.shebeistatus.djx + state.shebeistatus.ywx;
      drawDeviceRepair(
        state.shebeistatus.djx,
        state.shebeistatus.ywx,
        state.shebeistatus.bh,
        num
      );
    });
}
</script>
<style scoped lang="less">
@import url("../styles/sbgl.less");

.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.left {
  /* background-color: #ccc; */
}

.just {
  width: 100%;
  display: flex;
  height: 160px;
}

#left1 {
  width: 160px;
}

.pump {
  flex: 1;
  height: 100%;
  position: relative;
}

.pump img {
  height: 136px;
  margin-top: 10px;
}

.pump .com-shui {
  position: absolute;
  font-size: 14px;
  height: 26px;
  padding-left: 50px;
  display: flex;
  justify-content: space-between;
  width: 185px;
}

.com-shui div {
  height: 100%;
  line-height: 26px;
  color: #fff;
}

.shuizhi1 {
  /* color: #35ccff; */
  top: 15px;
  height: 100%;
  line-height: 1;
}

.shuizhi2 {
  /* color: #00efff; */
  top: 64px;
}

.erji-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.erji-item {
  width: 238px;
  height: 80px;
  display: flex;
}

.erji-item .img-icon {
}

.erji-item-txt {
  flex: 1;
}

.erji-jinshui {
  background: url(../assets/changcheng/bengbg.png) no-repeat;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  color: #fff;
  padding-left: 7px;
  margin-top: 15px;
}

.erji-data {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 22px;
  color: #ffeda8;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.wanhao {
  display: flex;
  height: 40px;
  border: 1px solid blue;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 10px;
  color: #fdfeff;
  font-style: normal;
}

.wanhao-l {
  width: 160px;
  border: 1px solid blue;
}

.wanhao-r {
  flex: 1;
  border: 1px solid blue;
}

.wanhao-bg {
  background: url(../assets/changcheng/wanhaoicon.png) no-repeat;
}

.wanhao-font {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 14px;
  color: #4dcdff;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 5px;
}

.qushi {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #cae5ff;
  line-height: 18px;
  font-style: normal;
}

.qushitu {
  height: 150px;
  width: 100%;
  border: 1px solid red;
}

.shebeiweixiutu {
  height: 100%;
  border: 1px solid red;
  width: 194px;
}

.shuizhi3 {
  color: #24eacd;
  top: 114px;
}

.weixiu {
  display: flex;
  height: 178px;
}

.weixiu-item {
  flex: 1;
}

.goto {
  position: absolute;
  top: 0;
  left: 40px;
  height: 45px;
  width: 112px;
  border-bottom: 1px solid rgb(0, 0, 255);
}
</style>
